<template>
  <div class="index">

    <!--nav start-->
    <nav class="flex flex-align-items-center">
      <main class="warp flex flex-space-between">
        <aside class="flex">
          <!--      logo-->
          <section class="logo">
            <img :src="logoImg" alt="">
          </section>


          <!--      nav-->
          <!--      v-for循环是可以使用两种方式的，一个是in，一个是of-->
          <ul class="flex flex-align-items-center">
            <li v-for="(item,index) of navArr" :key="index">
              {{ item.name }}
            </li>
          </ul>

        </aside>

        <!--      各种交互操作-->
        <section class="flex flex-align-items-center">

          <input type="text"   @keyup.enter="search" v-model="query">

          <input type="button" value="创造者中心">

          <input type="button" value="登录">

        </section>
      </main>
    </nav>
    <!--nav end-->

<!--    songs start-->
    <section>
      <ul>
        <li v-for="(item,index) in songsArr" :key="item.id" class="flex" @click="playMusic(item.id)">
          <div>{{index+1}}、</div>
          <div>{{item.album.name}}</div>
          <div>{{item.artists[0].name}}</div>
        </li>
      </ul>
    </section>
<!--    songs end-->

<!--    播放按钮-->
    <audio :src="playUrl" autoplay controls></audio>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Index",
  data() {
    return {
      //  es6的模块化，最终打包成commonjs
      logoImg: require('@/assets/imgs/logo.png'),
      navArr: [
        {'name': '发现音乐'},
        {'name': '我的音乐'},
        {'name': '发现音乐'},
        {'name': '发现音乐'}
      ],
      query: '',
      songsArr: [],
      playUrl:'',
    }
  },
  methods: {
    search() {
      console.log(this.query);
      axios.get(`http://localhost:3000/search?keywords=${this.query}`).then(res=>{
        console.log(res.data.result.songs)
        this.songsArr = res.data.result.songs
      })
    },
    playMusic(id){
      axios.get(`http://localhost:3000/song/url?id=${id}`).then(res=>{
        console.log(res.data.data[0]);
        this.playUrl = res.data.data[0].url;
      })
    }
  },
}
</script>

<style scoped lang="less">
@import url('../assets/css/common.less');

nav {
  height: @navH;
  box-sizing: border-box;
  background: @navBg;
  border-bottom: 1px solid #000;

  .logo {
    img {
      width: 157px;
    }
  }

  ul {
    li {
      color: #ccc;
      font-size: 14px;
      margin: 0 10px 0 20px;
    }
  }
}
</style>
